<script setup lang="ts">
defineProps<{
  options: {
    label: string
    value: number
  }[]

  modelValue?: number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: number): void
}>()

const toggleItem = (value: number) => {
  // 通知父组件修改 modelValue的值

  console.log(value)

  emit('update:modelValue', value)
}
</script>

<template>
  <div class="cp-radio-btn">
    <!-- 如果我们给的是数组 数组的每一项都是这个类名  -->
    <!-- 数组中给的是一个对象  对象的键 是 类名  是否有类名取决于后面的值 -->
    <!-- {} 对象的键 是 类名  是否有类名取决于后面的值 -->
    <a :class="['item', { active: modelValue === item.value }]" v-for="(item, index) in options" :key="index"
      @click="toggleItem(item.value)" href="javascript:;">{{ item.label }}</a>
    <!-- <a class="item" href="javascript:;">女</a> -->
  </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;

  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;

    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style>
